<template>
  <div class="scan h-full w-full">
    <QrcodeStream v-if="isScaning" @camera-on="onReady" @detect="onDetect">
      <!-- <div>
        <div class="qr-scanner">
          <div class="box">
            <div class="line" />
            <div class="angle" />
          </div>
        </div>
      </div> -->
    </QrcodeStream>
  </div>
</template>

<script lang='ts' setup>
import { showToast } from 'vant'
import { QrcodeStream } from 'vue-qrcode-reader'

const isScaning = ref(true)

function onDetect(detectedCodes) {
  showToast('1111')
  const target = detectedCodes[0]
  showToast(`decodedText-${target}`)
  if (target && target.rawValue) {
    console.log(target.rawValue)
    isScaning.value = false
  }
}
showToast('454545')
function onReady(capabilities) {
  showToast(11111 + capabilities)
  // hide loading indicator
}
</script>

<style>
</style>
